<template>
    <div>
        <Tables :data="this.data" :cols="this.cols" :pageNum="this.pagenum" :pageSize="this.pagesize" :total="this.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
            <template v-slot:time="{row}">
                {{new Date(row.update_time).toLocaleString()}}
            </template>
            <template v-slot:tabs="{row}">
                <el-tag type="danger">{{row.order_pay == 0 ? '未付款':'已付款'}}</el-tag>
            </template>
            <template v-slot:action="{row}">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="dialogVisibles=true"></el-button>
                <el-button type="success" size="mini" icon="el-icon-location-outline" @click="getkuaidi()"></el-button>
            </template>
        </Tables>

        <el-dialog
          title="物流信息"
          :visible.sync="dialogVisible"
          >
          
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in kuaidis"
                :key="index"
                :timestamp="activity.time">
                {{activity.context}}
              </el-timeline-item>
            </el-timeline>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog
          title="修改地址"
          :visible.sync="dialogVisibles"
          >
          选择收货地址：<el-cascader
            :options="cityOptions"
            :value="city"
            @change="changeProvince"
          >
          </el-cascader><br>
          详细地址：<el-input type="text" v-model="cityss" style="width:500px;margin-top:10px"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibles = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
          </span>
      </el-dialog>
    </div>
</template>

<script>
import cityOptions from '../../assets/city_data2017_element'
import Tables from "../../components/table";
import { ordersList,kuaidi } from "../../api/orders.js";
export default {
  components: { Tables },
  data() {
    return {
      cityss:'',
      city:'',
      cityOptions: cityOptions,
      reverse:false,
      dialogVisible:false,
      dialogVisibles:false,
      pagenum: 1,
      pagesize: 10,
      data: [],
      total: 0,
      kuaidis:[],
      cols: [
        {
          label: "#",
          type: "index"
        },
        {
          label: "订单编号",
          name: "order_number"
        },
        {
          label: "订单价格",
          name: "order_price"
        },
        {
          label: "是否付款",
          name: "order_pay",
          slot:'tabs'
        },
        {
          label: "是否发货",
          name: "is_send"
        },
        {
          label: "下单时间",
          name:'update_time',
          slot: "time"
        },
        {
          label: "操作",
          slot: "action",
          align: "center",
          width: 270
        }
      ]
    };
  },
  mounted() {
    this.getorders();

  },
  methods: {
    async getorders() {
      let res = await ordersList({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.data = res.data.data.goods;
      this.total=res.data.data.total
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getorders();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getorders();
    },
    async getkuaidi(){
      this.dialogVisible=true
      let res = await kuaidi();
      console.log(res);
      this.kuaidis=res.data.data

    }
  }
};
</script>

<style lang="scss" scoped>

</style>